<template>
  <a-layout style="height: 400px">
    <a-layout-header class="head-title"> 热门资讯 </a-layout-header>
    <a-layout-content>
      <div
        :style="{
          boxSizing: 'border-box',
          width: '100%',
          padding: '40px',
          backgroundColor: 'var(--color-fill-2)',
        }"
      >
        <a-row :gutter="20" v-for="value in 2" :key="value">
          <a-card
            :style="{ width: '360px' }"
            v-for="value in 3"
            :key="value"
            class="panel"
          >
            <template #actions>
              <span class="icon-hover">
                <IconThumbUp />
              </span>
              <span class="icon-hover">
                <IconShareInternal />
              </span>
              <span class="icon-hover">
                <IconMore />
              </span>
            </template>
            <template #cover>
              <div
                :style="{
                  height: '204px',
                  overflow: 'hidden',
                }"
              >
                <img
                  :style="{ width: '100%', transform: 'translateY(-20px)' }"
                  alt="dessert"
                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                />
              </div>
            </template>
            <a-card-meta title="新闻标题" description="新闻简介"> </a-card-meta>
          </a-card>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
  import {
    IconThumbUp,
    IconShareInternal,
    IconMore,
  } from '@arco-design/web-vue/es/icon';
</script>

<script lang="ts">
  export default {
    components: { IconThumbUp, IconShareInternal, IconMore },
  };
</script>
<style scoped>
  .general-card {
    width: 320px;
    margin: 0 0 0 0;
  }

  .head-title {
    color: #105ae4;
    text-align: center;
    font-size: 30px;
    padding-left: 0;
    line-height: 22px;
    position: relative;
    border-bottom: 2px solid
      linear-gradient(to right, #01dfe3, rgba(255, 255, 255, 0));
    margin-bottom: 20px;

    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      top: 0;
      left: 38%;
      width: 70px;
      height: 25px;
      transform: skewX(35deg);
      background: linear-gradient(to right, #2d83fa, #10faf8);
    }

    &:before {
      content: '|||';
      display: inline-block;
      font-weight: 900;
      color: #fff;
      line-height: 30px;
      font-size: 25px;
      position: absolute;
      position: absolute;
      top: -8px;
      left: 35%;
      color: #2d83fa;
      transform: skewX(35deg);
    }
  }

  .panel {
    margin: 10px 20px 10px 20px;
    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
      0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
  }

  .icon-hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.1s;
  }

  .icon-hover:hover {
    background-color: rgb(var(--gray-2));
  }
</style>
